Ext.ns('AIR2.Drawer');
/***************
 * AIR2 Drawer BinListLarge Component
 *
 * A dataview to display an unlimited number of Bins, using scrolling. Also
 * provides mechanisms for searching/sorting/filtering the list of Bins.
 *
 * @class AIR2.Drawer.BinListLarge
 * @extends PIN.LiveDataView
 * @cfg {Object/Array} inlineData
 *   Data radix to load inline, rather than issuing an ajax call.
 * @cfg {Object} inlineParams
 *   Parameters to use with any loaded inlineData.
 *
 */
AIR2.Drawer.BinListLarge = function(config) {
    if (!config) config = {};

    // setup the load params
    var p = config.inlineParams || {};
    var inlineLoad = (config.inlineData) ? true : false;
    var mySort = {};
    var myParams = {};
    mySort.field     = p.sort || AIR2.Drawer.Config.SORTFIELDS.lg[0].fld;
    mySort.direction = p.dir  || 'DESC';
    myParams.self = (Ext.isDefined(p.self)) ? p.self : 0;
    if (p.q) myParams.q = p.q;
    if (p.type) myParams.type = p.type;
    if (p.archived) myParams.archived = p.archived;
    if (p.deleted) myParams.deleted = p.deleted;
    // etc...

    // create store to interact with the Bin-URL
    var storeCfg = {
        url: AIR2.HOMEURL+'/batch.json',
        pageSize: 40,
        remoteSort: true,
        baseParams: myParams,
        sortInfo: mySort,
        autoLoad: true,
        autoSave: false,
        autoDestroy: true,
        restful: true,
        writer: new Ext.data.JsonWriter({
            encode: true,
            writeAllFields: false
        }),
        listeners: {
            load: function(store, recs, opt) {
                if (!inlineLoad) AIR2.Drawer.STATE.set('params', opt.params);
                else inlineLoad = false;
            }
        }
    };
    if (config.inlineData) storeCfg.data = config.inlineData;
    this.store = new PIN.LiveJsonStore(storeCfg);

    // call parent constructor
    AIR2.Drawer.BinListLarge.superclass.constructor.call(this, config);

}
Ext.extend(AIR2.Drawer.BinListLarge, PIN.LiveDataView, {
    cls: 'air2-binlist air2-binlist-large',
    emptyText: '<div class="air2-empty"><h3>No bins found</h3></div>',
    itemSelector: '.air2-drawer-batch',
    selectedClass: 'row-selected',
    overClass: 'row-over',
    multiSelect: true,
    tpl: new Ext.XTemplate(
        '<h3 class="name air2-corners3 bin-expand" {[this.quickTip(values)]}>' +
          '{batch_name:ellipsis(80)}</h3>' +
        '<div>' +
          '<span class="count">{[AIR2.Format.batchCount(values)]}</span>' +
          '<span class="last"> | {[AIR2.Format.batchLastUse(values)]} | </span>' +
          '<span class="owner">{[AIR2.Format.userName(values.User, true)]}</span>' +
        '</div>',
        {
            compiled: true,
            quickTip: function(values) {
                if (values.batch_name.length > 81)
                    return 'ext:qtip="' + values.batch_name + '"';
                else
                    return '';
            }
        }
    ),
    applyFilter: function(value) {
        this.store.setBaseParam('q', value);
        this.reloadDataView();
    },
    getBinRecord: function(target) {
        return this.getRecord(target);
    },
    refreshBin: function(target, counts) {
        // create new element
        var str = '', c = counts;
        if (c.insert) str += '<div>+'+c.insert+' added</div>';
        if (c.duplicate) {
            str += '<div>+'+c.duplicate+' duplicate';
            str += (c.duplicate > 1) ? 's</div>' : '</div>';
        }
        if (c.invalid) str += '<div>+'+c.invalid+' INVALID</div>';
        var addcounts = this.el.createChild({cls: 'add-counts', html: str});

        // align
        addcounts.alignTo(target, 'br-br?', [-6,-6]);

        // refresh and show add string
        this.refreshNode(this.indexOf(target));
        addcounts.fadeIn({duration:.1}).pause(1).fadeOut({remove:true});
    },
    maskBin: function(target) {
        Ext.fly(target).mask('Adding');
    }
});